<script>
export default {
  name: "ChapterList",
  data() {
    return {
      // formInline: {},
      chapterList: []
    }
  },
  created() {
    this.list()
  },
  methods: {
    // 查询
    list(){
      this.axios.post(`http://localhost:9999/api-novel/books/list?pid=`+ this.$route.query.id).then(res => {
        this.chapterList = res.data;
      })
    },
  //   重置
    resetQuery() {
      this.formInline = {};
      this.list();
    },
  }
}
</script>

<template>
    <div class="app-container" ref="container">
<!--      &lt;!&ndash; 固定的搜索和工具栏容器 &ndash;&gt;-->
<!--      <div class="fixed-header">-->
<!--        &lt;!&ndash; 搜索栏 &ndash;&gt;-->
<!--        <div class="search-bar">-->
<!--          <el-form :inline="true" :model="formInline" class="demo-form-inline">-->
<!--            <el-form-item label="小说名字">-->
<!--              <el-input v-model="formInline.name" placeholder="小说名字"></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item>-->
<!--              <el-button type="primary" @click="list">查 询</el-button>-->
<!--              <el-button @click="resetQuery">重 置</el-button>-->
<!--            </el-form-item>-->
<!--          </el-form>-->
<!--        </div>-->

<!--        &lt;!&ndash; 工具栏 &ndash;&gt;-->
<!--        <div class="toolbar-right">-->
<!--          <el-button type="primary" size="small" @click="handleAdd">-->
<!--            <i class="el-icon-plus"></i> 新增小说-->
<!--          </el-button>-->
<!--          <el-button size="small" @click="handleRefresh">-->
<!--            <i class="el-icon-refresh"></i> 刷新-->
<!--          </el-button>-->
<!--        </div>-->
<!--      </div>-->
      <div class="content-container">
        <el-table :data="chapterList" border stripe style="width: 100%">
          <el-table-column prop="id" label="ChapterID" width="120"></el-table-column>
          <el-table-column prop="chapter_id" label="章节ID" width="120"></el-table-column>
          <el-table-column prop="title" label="章节名称" width="120"></el-table-column>
          <el-table-column prop="updated_at" label="修改时间" width="120"></el-table-column>
          <el-table-column prop="word_count" label="章节字数" width="120"></el-table-column>
          <el-table-column prop="vip" label="是否VIP" width="120">
            <template slot-scope="scope">
              <el-tag :type="scope.row.vip === 1 ? 'success' : 'danger'">
                {{ scope.row.vip === 1 ? '免费' : '收费' }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
</template>

<style scoped>
.app-container {
  padding: 0;
  background-color: #fff;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.fixed-header {
  position: fixed;
  top: 50px;  /* 与顶部导航栏对齐 */
  left: 210px;  /* 与侧边栏对齐 */
  right: 0;
  background-color: #fff;
  z-index: 999;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);
}

.search-bar {
  flex: 1;
}

.toolbar-right {
  margin-left: 20px;
}

.table-container {
  margin-top: 70px;  /* 为固定头部留出空间 */
  padding: 0 20px;
}

.content-container {
  background-color: #fff;
  border-radius: 4px;
  width: 100%;
  overflow-x: hidden;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
  padding: 10px 0;
}

.el-table {
  margin-bottom: 20px;
}

.el-link {
  font-size: 12px;
}

/* 添加全局样式，隐藏滚动条但保持滚动功能 */
::-webkit-scrollbar {
  display: none;
}

/* 调整表单项的间距 */
.demo-form-inline .el-form-item {
  margin-bottom: 0;
  margin-right: 20px;
}

.demo-form-inline .el-form-item:last-child {
  margin-right: 0;
}
</style>